<template>
    <view>
        <view class="header">
            <view class="name">沃尔玛</view>
            <view class="price">￥{{ num }}</view>
            <view class="countdown">剩余支付时间: {{ countdownText }}</view>
        </view>
        <!-- 支付方式选择区域 -->
        <view class="body">
            <view class="payment-item" @click="selectPayment('wechat')">
                <view class="payment-left">
                    <img class="payment-icon" src="../../static/imgs/微信支付.png" alt="">
                    <text>微信支付</text>
                </view>
                <checkbox :checked="selectedPayment === 'wechat'"></checkbox>
            </view>
            <view class="payment-item" @click="selectPayment('unionpay')">
                <view class="payment-left">
                    <img class="payment-icon" src="../../static/imgs/银联支付.png" alt="">
                    <text>银联支付</text>
                </view>
                <checkbox :checked="selectedPayment === 'unionpay'"></checkbox>
            </view>
        </view>
        <!-- 立即支付按钮 -->
        <view class="foot" @click="zhifu">立即支付 {{ num }}</view>
    </view>
</template>

<script>
import config from '../config.js';
export default {
    data() {
        return {
            shoplist: [],
            // 当前选中的支付方式
            selectedPayment: null,
            // 倒计时截止时间
            deadline: null,
            // 倒计时文本
            countdownText: '',
            // 倒计时定时器
            countdownInterval: null,
            num: 0,
            adresslist: [],
        };
    },
    onShow() {
        // 去掉获取购物车数据的调用
        // this.FirstShop(); 
        this.startCountdown();
    },
    onLoad(options) {
        if (options.totalPrice) {
            this.num = parseFloat(options.totalPrice);
        }
        if (options.orderData) {
            try {
                const orderData = JSON.parse(decodeURIComponent(options.orderData));
                // 可以根据需要对 orderData 进行其他处理
                this.shoplist = orderData.products;
            } catch (error) {
                console.error('解析 orderData 失败:', error);
            }
        }
    },
    methods: {
        selectPayment(payment) {
            // 更新选中的支付方式
            this.selectedPayment = payment;
        },
        zhifu() {
            if (!this.selectedPayment) {
                uni.showToast({
                    title: '请选择支付方式',
                    icon: 'none'
                });
                return;
            }

            uni.showModal({
                title: '确认支付',
                content: '是否确认支付订单？',
                success: (res) => {
                    if (res.confirm) {
                        // 模拟支付成功
                        uni.showToast({
                            title: '支付成功',
                            icon:'success'
                        });

                        // 构造要上传的订单数据
                        const orderData = {
                            address: this.shoplist[0]?.address || {}, // 假设商品列表中第一个商品的地址代表整个订单地址，可根据实际调整
                            products: this.shoplist.map(item => ({
                                orderSales: item.quantity,
                                product: {
                                    name: item.name,
                                    img: item.img,
                                    price: item.price,
                                    sales: item.sales
                                }
                            })),
                            totalPrice: this.num,
                            createTime: new Date().toISOString(),
                            shopId: this.shoplist[0]?.shopid || '', // 假设商品列表中第一个商品的 shopid 代表整个订单的 shopid，可根据实际调整
                            shopName: '沃尔玛', // 这里假设固定为沃尔玛，可根据实际从数据中获取
                            isCanceled: '1' // 初始状态设为进行中，可根据实际情况调整
                        };

                        // 上传订单数据到服务器
                        uni.request({
                            url: config.api_host+'/orders',
                            method: 'POST', // 假设后端接口支持 POST 方法接收数据
                            data: {
                                data: [orderData] // 按照接口数据格式，将订单数据放在 data 数组中
                            },
                            success: (res) => {
                                console.log('订单上传成功', res);
                                // 延迟 1 秒后跳转到订单页面
                                setTimeout(() => {
                                    uni.switchTab({
                                        url: `/pages/dingdan/dingdan`
                                    });
                                }, 1000);
                            },
                            fail: (err) => {
                                console.error('订单上传失败', err);
                                uni.showToast({
                                    title: '订单上传失败',
                                    icon: 'none'
                                });
                            }
                        });
                    }
                }
            });
        },
        startCountdown() {
            // 设置截止时间为当前时间往后30分钟
            this.deadline = new Date().getTime() + 30 * 60 * 1000;
            this.countdownInterval = setInterval(() => {
                const now = new Date().getTime();
                const distance = this.deadline - now;
                const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((distance % (1000 * 60)) / 1000);

                this.countdownText = `${minutes < 10? '0' : ''}${minutes}:${seconds < 10? '0' : ''}${seconds}`;

            }, 1000);
        }
    }
};
</script>

<style scoped>
/* 页面头部样式 */
.header {
    width: 100%;
    height: 200px;
    background-color:#0091ff;
    padding-top: 20px;
}

/* 头部文字样式 */
.header view {
    color: #fff;
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}

/* 超市名称样式 */
.header .name {
    font-size: 25px;
    margin-bottom: 8px;
}

/* 支付倒计时样式 */
.header .countdown{
    width: 280px;
    height: 50px;
    font-size: 20px;
    font-weight: 400;
    background-color:#0091ff;
    line-height: 50px;
    border-radius: 20px;
    margin: 20px auto;
}

/* 支付方式选择区域样式 */
.body {
    padding: 20px;
}

/* 支付方式选项样式 */
.payment-item {
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    border-bottom: 1px solid #ebe8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-left {
    display: flex;
    align-items: center;
}

.payment-icon {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* 立即支付按钮样式 */
.foot {
    width: 85%;
    height: 50px;
    background-color:#0091ff;
    margin: 0 auto;
    border-radius: 20px;
    text-align: center;
    line-height: 50px;
    color: #fff;
}
</style>